<template>
  <view class="example-body">
    <uni-popup ref="showLeft" type="bottom" border-radius="5rpx 5rpx 0 0" background-color="#fff">
      <view class="button-group">
          <view style="color: #2B7FF3; font-weight: 400;" @tap="closeDrawer">取消</view>
          <view style="color: #2B7; font-weight: 400;">确认</view>
      </view>
      <view class="popup-content">
        <view v-for="item in applyTypes" :key="item.type" class="popup-item" @tap="getMessageListByType(item)" :class="{active : activeNumber === item.type}">
            {{ item.text }}
        </view>
    </view>
    </uni-popup>
  </view>
</template>

<script>
  export default {
    name:"message-tab",
    data() {
      return {
        applyTypes: [
          {
            text: '分类',
            type: ''
          },
          {
            text: '请假申批',
            type: 1,
          },
          {
            text: '出差申批',
            type: 2,
          },
          {
            text: '培训申批',
            type: 3,
          },
          {
            text: '合同申批',
            type: 4,
          },
          {
            text: '采购申批',
            type: 5,
            // bgColor: '#FF7A45',
          },
          {
            text: '入职申批',
            type: 6,
          },
          {
            text: '其他申批',
            type: 7,
          }
        ],
        activeNumber: null,
      };
    },
    methods: {
      showDrawer() {
        this.$refs.showLeft.open()
      },
      closeDrawer(){
        this.$refs.showLeft.close()
      },
      getMessageListByType(item) {
        this.activeNumber = item.type
        this.$emit('select',item)
        this.closeDrawer()
      },
      clearDrawerDate() {
        this.activeNumber = null
      }
    },
  }
</script>

<style lang="scss">
  .button-group {
    display: flex;
    justify-content: space-between;
    padding: 10rpx;
    margin: 10rpx 0;
  }
  .popup-content {
    display: flex;
    flex-wrap: wrap;
    padding: 10rpx;
    justify-content: space-around;
    
    .popup-item {
      flex: 1 1 30%;
      margin: 5px;
      padding: 10px;
      text-align: center;
      background-color: rgba(228, 228, 228, 0.6);
      border-radius: 5rpx;
      color: #000;
      &.active {
        background-color: rgba(255, 122, 69,0.2);        
        color: #FF7A45;
      }
    }
    
  }
  
  
</style>